<template>
    <div class="gold-shop-wrap">
        <van-nav-bar title="退货/退款" left-arrow fixed @click-left="onClickLeft" />
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div class="order_all" v-for="item,index in list" :key="index" :title="item">
                <div class="order_name">
                    <div class="order_name_left"> <img src="../../images/mine/shop.png" alt="">{{ item.shop_name }}
                    </div>
                    <div class="order_name_right" v-html="item.refund_type_desc"></div>
                    <!-- {{  }} -->
                </div>
                <div v-for="items, index in item.items" :key="index">
                    <div class="order_lists">
                        <img :src="items.left_icon" alt="">
                        <div class="order_goods">
                            <div class="order_goods_name">{{ items.title }}</div>
                            <div class="order_goods_sku">{{ items.sku_text }}</div>
                            <div class="order_goods_price" v-html="items.price_text"></div>
                        </div>
                    </div>
                </div>
                <!-- <div class="order_total">共计10件商品， 总计：<span>￥666</span></div> -->
                <div class="order_pay">
                    <div class="order_pay_money">
                        
                    </div>
                    <!-- <div class="">
                        <van-button class="order_pay_btn" size="small" round @click="getOrderDelete(item.id)">删除记录</van-button>
                        <van-button class="order_pay_btn" size="small" round @click="ordeInfo">查看详情</van-button>
                    </div> -->
                   <div style="display: flex;">
                    <div class="" v-for="itemBtn, index in item.buttons" :key="index"
                        @click="getOrderDelete(itemBtn.key, item.id)">
                        <van-button class="order_pay_btn" size="small"
                            :color="itemBtn.style ? 'linear-gradient(to right, #FF5851, #E9011B)' : ''" round>{{
            itemBtn.name }}</van-button>
                    </div>
                   </div>
                </div>
            </div>
        </van-list>
        <van-popup v-model="show" :style="{ width: '70%' }" round>
            <div class="popup_title">是否删除该记录？</div>

            <div class="popup_btn_list">
                <van-button class="popup_btn" size="small" round @click="show=false">取消</van-button>
                <van-button class="popup_btn" type="primary" size="small"
                    color="linear-gradient(to right, #FF5851, #E9011B)" round @click="orderSubmit">确定</van-button>
            </div>
        </van-popup>
    </div>
</template>
<script>
import { Dialog } from 'vant';
import {AFTER_SALES_LIST ,AFTER_SALES_DELETE} from '@/api/mine'
export default{
    data() {
        return {
            active:0,
            loading:false,
            finished: false,
            list:[],
            pageSize:20,
            page:1,
            show:false,
            orderId:''
        }
    },
    created() {
    window.scrollTo(0, 0)

        this.active=this.$route.query.id
    },
    methods:{
        onClickLeft() {
            this.$router.back()
        },
        resetInit() {
        this.page = 1;
			  this.list = [];
			  this.finished = false;
			  this.loading = true;
			  this.onLoad()
    },
    onLoad() {
                 let params = {};
				params['page_num'] = this.page;
				params['page_size'] = this.pageSize;
				// params['status'] = this.active;
                this.$http.get(AFTER_SALES_LIST, {params:params})
				.then(res => {
				  const {
				    list
				  } = res.data;

				  if(list && list.length) {
				     this.page++;
				     this.list = this.list.concat(list);
                    //  console.log(this.orderList);

				     // 加载状态结束
				     this.loading = false;
				     if(list.length < this.pageSize) {
				      this.finished = true;
				     }
				  }else {
				    this.finished = true;
				  }
				})
    },
    // 详情
    ordeInfo(id){
        this.$router.push({path:"/refundInfo",query:{
            id:id,
            msg:1
        }})
    },
    //
    getOrderDelete(key,id){
        if(key=='after_sales_detail'){
            // 查看详情
            this.ordeInfo(id)
        }else if(key=='after_sales_delete'){
            this.show=true;
            this.orderId=id

        }

    },
    // 删除
    orderSubmit(){
        this.$http.post(AFTER_SALES_DELETE+this.orderId).then(res=>{
            this.$toast.success(res.message);
            this.show=false
            this.orderId=''
            this.resetInit()
        }).catch(err=>{

        })
    },
    }

}
</script>
<style lang="scss" scoped>
.gold-shop-wrap {
    min-height: 100vh;
    padding-top: 46px;
    background: #F2F4F5;

    ::v-deep .van-nav-bar .van-icon {
        color: #333333;
    }

    ::v-deep .van-nav-bar__arrow {
        font-size: 20px;
    }
}

.order_all {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 0.2rem;
    // border: 0.01rem solid #999;
    border-radius: 0.1rem;
    background: #fff;

    .order_name {
        display: flex;
        justify-content: space-between;
        font-size: 0.28rem;
        padding: 0.32rem;
        padding-bottom: 0;
        // border-bottom: 0.01rem solid #999;
        box-sizing: border-box;

        img {
            width: 0.5rem;
            height: .5rem;
            vertical-align: middle;
            margin-right: .16rem
        }

        &_left {
            font-weight: bold;
        }

        &_right {
            font-size: 0.28rem;
            color: #F32A23;
        }
    }

    .order_lists {
        padding: 0.32rem;
        display: flex;
        justify-content: space-between;

        img {
            width: 1.8rem;
            height: 1.8rem;
        }

        .order_goods {
            width: 70%;
            font-size: 0.3rem;
            line-height: 0.6rem;

            &_name {
                font-size: 0.28rem;
                font-weight: bold;
            }

            &_sku {
                font-size: 0.24rem;
                color: #999;
            }

            &_price {
                font-size: 0.28rem;
                // font-weight: bold;
                display: flex;
                justify-content: space-between;

                span:last-child {
                    font-weight: 500;
                    font-size: 0.24rem;
                    color: #999;
                }
            }
        }
    }

    .order_total {
        // margin-left: 2.3rem;
        font-size: 0.25rem;
        margin-bottom: 0.2rem;
        text-align: right;
        margin-right: .2rem;

        span {
            color: #F32A23;
            font-size: 0.32rem;
            font-weight: bold;
        }

        // bottom: 0;
    }

    .order_pay {
        // border-top: 0.01rem solid #999;
        display: flex;
        justify-content: space-between;
        padding: 0.2rem;

        .order_pay_money {
            font-size: 0.24rem;
            margin-top: 0.2rem;
            line-height: 0.4rem;

            div {
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: .28rem;
                color: #F32A23;
                // line-height: 20px;
                text-align: left;
                font-style: normal;
            }
        }

        .order_pay_btn {
        margin-left: 0.2rem;
        padding: 0.12rem 0.24rem;
        font-size: 0.28rem;
        border: 1px solid #e3e3e3;
      }
    }
}
.popup_title {
    text-align: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    line-height: 22px;
    font-style: normal;
    padding: 0.72rem 0;
}

.popup_btn_list {
    width: 90%;
    margin: 0 auto;
    padding-bottom: .4rem;
    display: flex;
    justify-content: space-between;

    .popup_btn {
        width: 45%;
    }

}
</style>
